<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>News</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!--the following css will be used for toolbar,only for demo-->
	<link href="../../../ui/dropdownlist/dropdownlist.css" type="text/css" rel="stylesheet"/>

	<!---->
	<!--news widget-->
	<link href="../../../common/common.css" type="text/css" rel="stylesheet"/>
	<link href="../../../ui/dragdrop/dragdrop.css" type="text/css" rel="stylesheet"/>
	<link href="../../../ui/tabmenu/tabmenu.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/scrollpanel/scrollpanel.css" type="text/css" rel="stylesheet"/>
	<link href="../../../ui/cascademenu/cascademenu.css" type="text/css" rel="stylesheet"/>
	<link href="../../../ui/calendar/calendar.css" type="text/css" rel="stylesheet"/>
	<link href="../../../ui/pagination/pagination.css" type="text/css" rel="stylesheet"/>
	<link href="../../../ui/datagrid/datagrid.css" type="text/css" rel="stylesheet"/>
	<link href="../../../widgets/news/news.css" type="text/css" rel="stylesheet"/>
	<link href="../../../widgets/autocomplete/autocomplete.css" type="text/css" rel="stylesheet"/>
	<link href="../../../theme/default/style.css" type="text/css" rel="stylesheet"/>
	
</head>
<body>
	<!-- the container for calling functions of GainerLoserActive widget-->
	<div class="sdk-news-toolbar" style="width:600px;border:1px #ccc solid;margin-bottom:20px;">
		<div class="clearfix">
			<label style="float:left;margin:5px;">Size:</label>
			<div class="size-container" style="float:left"></div>
		</div>
		<div class="clearfix">
			<label style="float:left;margin:5px;">Symbol list:</label>
			<input type="text" class="qs-ui-ipt symbol-list-ipt" value="XNYS:IBM,XNAS:MSFT,XNAS:AAPL">
			<a href="javascript:void(0)" class="qs-ui-btn toolbar-btn display-tickers">display tickers news</a><a href="javascript:void(0)" class="qs-ui-btn toolbar-btn display-all">display all news</a>
		</div>
		<div class="callback-log-container" style="border-top:1px solid #ccc;height:200px;overflow:auto;"></div>
	</div>
	
	<!--the container for loading the GainerLoserActive widget-->
    <div class="sdk-news-container" style="width:600px;height:300px"></div>
	
	<!--jquery-->
    <script type="text/javascript" src="../../../lib/jquery.js"></script>
	
	<!--language-->
	<script type="text/javascript" src="../../../formatter/qs_formatter_en_us.js"></script>
	<script type="text/javascript" src="../../../language/en_us/qs_news_en_us.js"></script>
	
	<!--core-->
	<script type="text/javascript" src="../../../lib/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="../../../lib/jquery.json.min.js"></script>
	<script type="text/javascript" src="../../../core/common.js"></script>
	<script type="text/javascript" src="../../../core/permissionChecker.js"></script>
	<script type="text/javascript" src="../../../core/tickers.js"></script>
	<script type="text/javascript" src="../../../core/subscriber.js"></script>
	<script type="text/javascript" src="../../../core/dataHandler.js"></script>
	<script type="text/javascript" src="../../../core/pull.js"></script>
	<script type="text/javascript" src="../../../core/push.js"></script>
	<script type="text/javascript" src="../../../core/SDKDataManager.js"></script>
	<!--news widget-->
	<script type="text/javascript" src="../../../common/common.js"></script>
	<script type="text/javascript" src="../../../ui/util/util.js"></script>
	<script type="text/javascript" src="../../../ui/dragdrop/dragdrop.js"></script>
	<script type="text/javascript" src="../../../ui/tabmenu/tabmenu.js"></script>
	<script type="text/javascript" src="../../../ui/scrollpanel/scrollpanel.js"></script>
	<script type="text/javascript" src="../../../ui/cascademenu/cascademenu.js"></script>
	<script type="text/javascript" src="../../../ui/calendar/calendar.js"></script>
	<script type="text/javascript" src="../../../ui/pagination/pagination.js"></script>
	<script type="text/javascript" src="../../../ui/datagrid/datagrid.js"></script>
	<script type="text/javascript" src="../../../widgets/news/news_DataManager.js"></script>
	<script type="text/javascript" src="../../../widgets/news/news.js"></script>
	<script type="text/javascript" src="../../../widgets/autocomplete/autocomplete.js"></script>
	<script type="text/javascript" src="../../../theme/default/style.js"></script>
	<!--the following js will be used for toolbar,only for demo-->
	<script type="text/javascript" src="../../../ui/dropdownlist/dropdownlist.js"></script>
	<!---->
	
	<script type="text/javascript">
		QSAPI.init("DISN");
		var news=null;
		QSAPI.Authentication.login("511F1BFFABACF2797D53014B7B7EF29F502E7015781E8D93A04989A70197E422B9AC0FE2E59882CDC9713E118EEA680F7F0E859C73FBD6BEF64C7DD04490EF1A","62D2A0641B01FBF65FA127365CDC0DC427458A67D958FC979718FF067CCD1A8D8D4E839255D60957C1A502D25C724A1D65F6EEE07636A0AA84E8F51C8D1831EE",{
			onFailure:function(result){
			},
			onSuccess:function(result){
				news=new QSAPI.Widget.News($('.sdk-news-container'),null,{
					onClick:function(result){
						log('onClick',result);
					},
					onLoad:function(result){
						log('onLoad',result);
					},
					onHeightChange:function(result){
						log('onHeight',result);
					},
					onStateChange:function(){
						log('onStageChange',"");
					}
				},"news1");
			}
		});
	
	
		var sizeDDL=new Util.DropDownList($('.size-container'),function(t, v){
			if(news){
				var size=v.split(',');
				news.changeOutSize(size[0],size[1]);
			}
        },[{
			val:'600,300',
			txt:'600*300'
		},{
			val:'1000,300',
			txt:'1000*300'
		},{
			val:'600,600',
			txt:'600*600'
		}],{
            actionAtInit:false,
			width:100
        });
	
		$('.toolbar-btn').bind('click',function(e){
			var target=$(e.target);
			if(news){
				if(target.hasClass('display-tickers')){
					var tickers=$('.symbol-list-ipt').val();
					if(tickers!=null&&tickers!=''){
						tickers=tickers.split(',');
						QSAPI.TickerFactory.create(tickers,{
							onSuccess:function(tickerObjects){
								news.acceptTicker(tickerObjects);
							}
						})
					}
				}else if(target.hasClass('display-all')){
					news.displayAll();
				}
			}
		});
		
		var logContainer=$('.callback-log-container');
		var log=function(event,result){
			var str="";
			if(typeof result=='string'){
				str=result;
			}else{
				for(var key in result){
					str+=key+": "+result[key]+"<br/>";
				}
			}
			logContainer.prepend('<br/><Strong style="font-size:14px;display:block;">'+event+'('+getDateTime()+')</Strong>'+str);
		}
		var getDateTime=function(){
			var now=new Date();
			return now.getFullYear()+"/"+(now.getMonth()+1)+"/"+now.getDate()+","+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
		}
	
    </script>
</body>
</html>



